<template>
    <div class="fbox">
        <a-form ref="formref" :model="formdata" :labelCol="{span:5}" :rules="rules" @finish="tosub" >
            <a-form-item hasFeedback name="name" label="用户组名称">
                <a-input block v-model:value="formdata.name" placeholder="用户组名称" />
            </a-form-item>
            <a-form-item hasFeedback name="description" label="说明">
                <a-input block v-model:value="formdata.description" placeholder="说明" />
            </a-form-item>
            <a-form-item hasFeedback name="minscore" label="积分大于">
                <a-input block v-model:value="formdata.minscore" placeholder="积分大于" />
            </a-form-item>
            <a-form-item hasFeedback name="maxscore" label="积分小于">
                <a-input block v-model:value="formdata.maxscore" placeholder="积分小于等于" />
            </a-form-item>
            <a-form-item class="text-center">
                <a-button html-type="submit" type="primary">确认修改</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<style lang="less" scoped>
.fbox{
    padding:20px 15px;
    .text-center{
        text-align: center; margin-top:16px;
    }

}
</style>
<script>
import { defineComponent, reactive,ref, resolveDirective, toRaw } from 'vue'
import { useRoute } from 'vue-router'
import { groupadd } from '@/api/user';
import { message } from 'ant-design-vue';

export default defineComponent({
    setup(props,context) {
        const route=useRoute();
         
        const formdata=reactive({
            name:'',
            description:'',
            minscore:0,
            maxscore:0
        });

        message.config({top:'200px',duration:1.2});

        const formref=ref();

        const checkname= async (_rules,value) =>{
            if(!value){
                return Promise.reject('不能为空');
            }
            return Promise.resolve();
        };

        const checkval = async(_rules,value) =>{
            if(value==='')
            {
                return Promise.reject('不能为空');
            }
            if(isNaN(Number(value))){
               return Promise.reject('请填写数字');
            }
            return Promise.resolve();
        };

        const rules={
            name:[{required:true,validator:checkname,trigger:'blur'}],
            minscore:[{required:true,validator:checkval,trigger:'blur'}],
            maxscore:[{required:true,validator:checkval,trigger:'blur'}],
        };

        const tosub= ()=>{
            const obj=toRaw(formdata);
             
            
            groupadd(obj).then(
                res=>{
                    console.log(res.data);
                    if(res.data['code']==200){
                        message.success('修改成功').then(
                            res=>{
                                context.emit('gbs');
                            },
                            err=>{
                                console.log(err);
                            }
                        );
                    }
                    else {
                        console.log(res);
                        message.error(res.data['msg']);

                    }
                },
                err=>{
                    console.log(err);
                }
            )
            
        };

        

        return{
            formdata,rules,tosub
        }

    },
})
</script>
